<template>
	<view class="container">
		<view class="list-one-w" v-for="(pos ,index) in postList" :key="index">
			<view class="list-one-img">
				<image class="fengrui-img" :src="pos.url"></image>
			</view>
			<view class="list-one-data-w">
				<view class="list-one-title">
					{{ pos.article_title}}
				</view>
				<view class="list-ona-abstract">
					{{pos.article_introduction}}
				</view>
				<view class="list-one-qu">
					<view class="list-one-time">
						<view class="list-one-time-y"></view>
						<view class="list-one-time-n">
							时间：{{pos.article_create_time}}
						</view>
					</view>
					<view class="list-one-time">
						<view class="list-one-time-l"></view>
						<view class="list-one-time-n">
							阅读：{{pos.article_read_num}}
						</view>
					</view>
					<view class="list-one-time">
						<view class="list-one-time-h"></view>
						<view class="list-one-time-n">
							评论：{{pos.article_comment_num}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 文章列表
				postList: []
			}
		},
		onLoad() {
			this.getbrowseRecords();
		},
		methods: {
			//获取缓存记录
			getbrowseRecords: function() {
				var browseRecords = uni.getStorageSync('browseRecords');
				if(browseRecords){
					browseRecords = JSON.parse(browseRecords)
					this.postList = browseRecords;
				}else{
					uni.showToast({
						icon:"none",
						title:"暂无数据"
					})
				}
			}
		},
		// 分享小程序界面
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '小程序名字id',
				path: '/pages/index/index',
				imageUrl: ''
			}

		},
	}
</script>

<style>
	/* 文章列表单排 */
	.list-one-time-n {
		color: #D3D3D3;
		font-size: 10px;
		height: 16rpx;
		line-height: 16rpx;
		margin-left: 8rpx;
	}

	.list-one-time-h {
		height: 18rpx;
		width: 18rpx;
		border-radius: 50rpx;
		background-color: #FD6D6D;
	}

	.list-one-time-l {
		height: 18rpx;
		width: 18rpx;
		border-radius: 50rpx;
		background-color: #70DDF0;
	}

	.list-one-time-y {
		height: 18rpx;
		width: 18rpx;
		border-radius: 50rpx;
		background-color: #4FABFA;
	}

	.list-one-time {
		display: flex;
		margin-top: 18rpx;
		margin-left: 18rpx;

	}

	.list-one-qu {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.list-ona-abstract {
		color: #ADADAD;
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-top: 16rpx;
	}

	.list-one-title {
		font-size: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.list-one-data-w {
		margin: 28rpx;
	}

	.list-one-img {
		height: 280rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.list-one-w {
		box-shadow: 0px 6px 9px rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;
		margin: 0rpx 0rpx 70rpx 0rpx;
		overflow: hidden;
	}

	.container {
		padding: 40rpx;
	}

	.fengrui-img {
		height: 100%;
		width: 100%;
	}
</style>
